<template>
  <div class="app-container">
    <div class="button-margin">
      <el-button icon="el-icon-plus" type="primary" @click="onAdd">新增</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column fixed="left" label="操作" width="240">
        <template slot-scope="scope">
          <el-button v-if="scope.row.STATE_ == '0'" @click="startDeploy(scope.row)" type="text" size="small">运行</el-button>
          <el-button v-if="scope.row.STATE_ == '1'" @click="stopDeploy(scope.row)" type="text" size="small">停止</el-button>
          <el-button @click="reDeploy(scope.row)" type="text" size="small">拉取应用</el-button>
          <el-button @click="deleteDeploy(scope.row)" type="text" size="small">删除</el-button>
          <el-button @click="viewApp(scope.row)" type="text" size="small">访问</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="学校ID" width="150">
        <template slot-scope="scope">
          {{ scope.row.SCHOOL_ID_ }}
        </template>
      </el-table-column>
      <el-table-column label="学校名称">
        <template slot-scope="scope">
          {{ scope.row.SCHOOL_NAME_ }}
        </template>
      </el-table-column>
      <el-table-column label="svn路径" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.SVN_PATH_ }}</span>
        </template>
      </el-table-column>
      <el-table-column label="svn用户名" align="center">
        <template slot-scope="scope">
          {{ scope.row.SVN_USERNAME_ }}
        </template>
      </el-table-column>
      <el-table-column label="数据库用户名" align="center">
        <template slot-scope="scope">
          {{ scope.row.DATABASE_USERNAME_ }}
        </template>
      </el-table-column>
      <el-table-column label="运行状态" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.STATE_ == '0'">未运行</div>
          <div v-if="scope.row.STATE_ == '1'" style="color:#E6A23C;">运行中</div>
        </template>
      </el-table-column>
      <el-table-column label="底座版本" align="center">
        <template slot-scope="scope">
          {{ scope.row.PEDESTAL_VERSION_ }}
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize" @pagination="getList" />
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <div class="app-container">
          <el-form :rules="rules" ref="form" :model="form" label-width="120px">
            <el-form-item label="学校ID" prop="SCHOOL_ID_">
              <el-input v-model="form.SCHOOL_ID_" />
            </el-form-item>
            <el-form-item label="学校名称" prop="SCHOOL_NAME_">
              <el-input v-model="form.SCHOOL_NAME_" />
            </el-form-item>
            <el-form-item label="SVN路径" prop="SVN_PATH_">
              <el-input v-model="form.SVN_PATH_" />
            </el-form-item>
            <el-form-item label="SVN用户名" prop="SVN_USERNAME_">
              <el-input v-model="form.SVN_USERNAME_" />
            </el-form-item>
            <el-form-item label="SVN密码" prop="SVN_PASSWORD_">
              <el-input v-model="form.SVN_PASSWORD_" />
            </el-form-item>
            <el-form-item label="底座版本" prop="PEDESTAL_VERSION_">
              <el-select v-model="form.PEDESTAL_VERSION_" placeholder="请选择底座版本">
                <el-option label="203" value="203" />
                <el-option label="154" value="154" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit('form')">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  <style scoped>
    .button-margin {
      margin-bottom: 20px;
    }

  </style>
  <script>
    import request from '@/utils/request'
    import Pagination from '@/components/Pagination'
    export default {
      components: { Pagination },
      filters: {
        statusFilter(status) {
          const statusMap = {
            published: 'success',
            draft: 'gray',
            deleted: 'danger'
          }
          return statusMap[status]
        }
      },
      data() {
        return {
          list: null,
          listLoading: true,
          total: 0,
          listQuery: {
            pageIndex: 1,
            pageSize: 20
          },
          dialogVisible: false,
          handleClose: true,
          form: {},
          rules: {
            SCHOOL_ID_: [
            { required: true, message: '请输入学校ID', trigger: 'blur' },
            { min: 5, max: 5, message: '长度为5位数字', trigger: 'blur' }
            ],
            SCHOOL_NAME_: [
            { required: true, message: '请输入学校名称', trigger: 'change' }
            ],
            SVN_PATH_: [
            { required: true, message: '请输入SVN路径', trigger: 'change' }
            ],
            SVN_USERNAME_: [
            { required: true, message: '请输入SVN用户名', trigger: 'change' }
            ],
            SVN_PASSWORD_: [
            { required: true, message: '请输入数据库用户名', trigger: 'change' }
            ],
            DATABASE_USERNAME_: [
            { required: true, message: '请输入SVN密码', trigger: 'change' }
            ],
            DATABASE_PASSWORD_: [
            { required: true, message: '请输入数据库密码', trigger: 'change' }
            ],
            PEDESTAL_VERSION_: [
            { required: true, message: '请选择底座版本', trigger: 'change' }
            ]
          }
        }
      },
      created() {
        this.getList()
      },
      methods: {
        getList() {
          this.listLoading = true
          request({
            url: `${window.contextPath}/testDeploy/queryProjectList.do`,
            method: 'post',
            params: this.listQuery
          }).then(response => {
            this.list = response.rows
            this.total = response.total
            this.listLoading = false
          })
        },
        onSubmit(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              var formData = this.form;
              var loading = this.$loading({
                lock: true,
                text: '此步骤较慢，请耐心等待',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
              });
              request({
                url: `${window.contextPath}/testDeploy/saveProject.do`,
                method: 'post',
                params: {
                  formData: JSON.stringify(formData)
                }
              }).then(response => {
                loading.close();
                this.dialogVisible = false;
                this.getList();
              }, error => {
                loading.close();
              });
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        onCancel() {
          this.dialogVisible = false;
        },
        onAdd() {
          this.dialogVisible = true;
        },
        startDeploy(data) {
          this.$confirm('确定启动该服务吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var wid = data.WID;
            request({
              url: `${window.contextPath}/testDeploy/startUp.do`,
              method: 'post',
              params: {
                wid: wid
              }
            }).then(response => {
              this.$message({
                type: 'success',
                message: '应用正在启动'
              });
              this.getList()
            }, error => {
              console.log(error)
            });

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        },
        stopDeploy(data) {
          this.$confirm('确定停止该服务吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var wid = data.WID;
            request({
              url: `${window.contextPath}/testDeploy/stopDeploy.do`,
              method: 'post',
              params: {
                wid: wid
              }
            }).then(response => {
              this.$message({
                type: 'success',
                message: '应用正在停止'
              });
              this.getList()
            }, error => {
              console.log(error)
            })

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        },
        deleteDeploy(data) {
          this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var wid = data.WID;

            request({
              url: `${window.contextPath}/testDeploy/deleteProject.do`,
              method: 'post',
              params: {
                wids: wid
              }
            }).then(response => {
              loading.close();
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getList()
            }, error => {
              console.log(error)
            })

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        },
        reDeploy(data) {
          this.$confirm('此操作将重新拉取SVN应用, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var wid = data.WID;
            var loading = this.$loading({
              lock: true,
              text: '应用拉取中，请稍候',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });
            request({
              url: `${window.contextPath}/testDeploy/reDeploy.do`,
              method: 'post',
              params: {
                wid: wid
              }
            }).then(response => {
              loading.close();
              this.$message({
                type: 'success',
                message: '拉取成功!'
              });
              this.getList()
            }, error => {
              loading.close();
              console.log(error)
            })

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        },
        viewApp(data){
          var url = 'http://172.16.5.53:7081/u'+data.SCHOOL_ID_+data.SERIAL_NUMBER_+'/sys/ggglmk/res/index.do';
          window.open(url);
        }
      }
    }

  </script>
